<script setup name="mv-detail">
import 'vue3-video-play/dist/style.css'
import { useRoute } from 'vue-router'
import { onMounted, reactive, toRefs, watch, ref } from 'vue'
import { mvDetail, mvUrl, simiMv, mvDetailInfo } from '@/services/mv'
import { videoPlay } from 'vue3-video-play'
import { MoreOne, GoodTwo, ShareTwo, Message, Add } from '@icon-park/vue-next'
import { formartNum, formatSongTime } from '@/utils/util'
import { usePlayStore } from '@/stores'
import { storeToRefs } from 'pinia'
import IconPark from '@/components/common/IconPark.vue'

// 页面挂载时获取路由传参
const route = useRoute()
const mvInfo = reactive({
  mId: '0',
  mvDetail: {},
  // 0: 歌曲 1: mv 2: 歌单 3: 专辑  4: 电台 5: 视频 6: 动态
  type: 1,
  videoOptions: {
    //视频源
    src: "",
    // 封面
    poster: "",
    width: '100%',
    height: '100%',
    // 默认音量
    volume: 1,
    // 控制器显示的按钮
    controlBtns: ['audioTrack', 'volume', 'fullScreen', 'setting', 'speedRate'],
    muted: true,
    control: true,
  },
  simiMv: [],
  artists: [],
  mvDetailInfo: {}
})

const deviceType = ref('desktop')

const { audioRef, isPlayer } = storeToRefs(usePlayStore())

const { videoOptions } = toRefs(mvInfo)

// 获取mv详情
const getMvDetail = async () => {
  const res = await mvDetail(mvInfo.mId)
  mvInfo.mvDetail = res.data
  mvInfo.videoOptions.poster = res.data.cover
  mvInfo.artists = res.data.artists
}

// 获取mv播放地址
const getMvUrl = async r => {
  const res = await mvUrl({ id: mvInfo.mId, r })
  mvInfo.videoOptions.src = res.data.url
}

// 获取相似mv
const getSimiMv = async () => {
  const res = await simiMv(mvInfo.mId)
  mvInfo.simiMv = res.mvs
}

// 获取mv点赞转发评论
const getMvDetailInfo = async () => {
  const res = await mvDetailInfo(mvInfo.mId)
  mvInfo.mvDetailInfo = res
}

// 点击跳转
const toPlayMv = id => mvInfo.mId = id

const onLoad = () => Promise.all([getMvDetail(), getMvUrl(), getSimiMv(), getMvDetailInfo()])

const onPlaying = () => {
  audioRef.value.pause()
  isPlayer.value = true
}

const checkDeviceType = () => {
  if (navigator.platform.includes('iPhone') || navigator.platform.includes('iPad')) deviceType.value = 'ios'
}

onMounted(() => {
  mvInfo.mId = route.query.id
  onLoad()
  checkDeviceType()
})

watch(
  () => mvInfo.mId,
  async () => await onLoad()
)
</script>

<template>
  <div class="mv-detail">
    <van-sticky :offset-top="0">
      <van-nav-bar class="mv-detail-header" :title="`${mvInfo.mvDetail?.name} - ${mvInfo.mvDetail?.artistName}`"
        left-arrow @click-left="$router.back()">
        <template #right>
          <IconPark :icon="MoreOne" :strokeWidth="2" :size="6" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <van-sticky :offset-top="48">
      <videoPlay v-if="videoOptions.src && deviceType !== 'ios'" v-bind="videoOptions" @playing="onPlaying" />
      <video v-else style="width: 100%;" :src="videoOptions.src" playsinline controls @playing="onPlaying"></video>
    </van-sticky>

    <van-row gutter="24" justify="center" align="center">
      <van-col span="19">
        <div class="mv-detail-artist">
          <van-image round width="40" height="40" :src="mvInfo.artists[0]?.img1v1Url" />
          <div class="mv-detail-artist-info">
            <h3>{{ mvInfo.artists[0]?.name }}</h3>
            <span>发布时间：{{ mvInfo.mvDetail.publishTime }}</span>
            <span>播放量：{{ formartNum(mvInfo.mvDetail.playCount) }}</span>
          </div>
        </div>
      </van-col>

      <van-col span="5">
        <van-button round size="mini" color="red" plain icon="plus">关注</van-button>
      </van-col>
    </van-row>

    <van-row gutter="24" justify="center" align="center" class="mv-detail-desc" v-if="mvInfo.mvDetail.desc">
      <van-col span="22">
        <van-text-ellipsis :content="mvInfo.mvDetail.desc" rows="2" expand-text="展开" collapse-text="收起" />
      </van-col>
    </van-row>

    <van-row gutter="24" justify="center" align="center" class="mv-detail-actions">
      <van-col span="6">
        <div class="mv-detail-actions-content">
          <IconPark :icon="Add" theme="filled" :size="8" fill="#5b5b5b" />
          收藏
        </div>
      </van-col>

      <van-col span="6">
        <div class="mv-detail-actions-content">
          <IconPark :icon="ShareTwo" theme="filled" :size="8" fill="#5b5b5b" />
          {{ formartNum(mvInfo.mvDetailInfo?.shareCount) }}
        </div>
      </van-col>

      <van-col span="6">
        <div class="mv-detail-actions-content">
          <IconPark :icon="Message" theme="filled" :size="8" fill="#5b5b5b" />
          {{ formartNum(mvInfo.mvDetailInfo?.commentCount) }}
        </div>
      </van-col>

      <van-col span="6">
        <div class="mv-detail-actions-content">
          <IconPark :icon="GoodTwo" theme="filled" :size="8" fill="#5b5b5b" />
          {{ formartNum(mvInfo.mvDetailInfo?.likedCount) }}
        </div>
      </van-col>
    </van-row>

    <van-divider />

    <van-row gutter="24" justify="center" align="center" v-for="item in mvInfo.simiMv" :key="item.id"
      class="mv-detail-simiMv" @click="toPlayMv(item.id)">
      <van-col span="8">
        <div class="mv-detail-simiMv-duration">
          <van-image :src="item.cover" radius="4" />
          <span>{{ formatSongTime(item.duration) }}</span>
        </div>
      </van-col>
      <van-col span="16">
        <div class="mv-detail-simiMv-info">
          <van-text-ellipsis :content="item.name" rows="2" />
          <span>{{ item.artistName }}</span>
          <span>{{ formartNum(item.playCount) }} 播放</span>
        </div>
      </van-col>
    </van-row>
    <div class="mv-detail-occupying"></div>
  </div>
</template>

<style lang="scss" scoped>
.mv-detail {
  &-header {
    background-color: var(--color-background);

    :deep(.van-nav-bar__title) {
      color: var(--reversal-text);
    }

    :deep(.van-icon) {
      color: var(--reversal-text);
    }
  }

  &-artist {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-top: 10px;
    color: var(--reversal-text);

    &-info {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      font-size: 10px;
      line-height: 14px;
      color: #6f6f6f;

      h3 {
        font-size: 14px;
        font-weight: bold;
        padding-bottom: 4px;
        color: var(--reversal-text);
      }
    }
  }

  &-actions {
    padding: 10px 0;

    &-content {
      display: flex;
      align-items: center;
      flex-direction: column;
      color: #6f6f6f;
      font-size: 12px;
    }
  }

  &-desc {
    font-size: 12px;
    padding: 10px 0;
  }

  &-simiMv {
    padding: 10px 0;

    .van-col--8 {
      padding-left: 10px;
      padding-right: 0 !important
    }

    .van-col--16 {
      padding-right: 4px;
    }

    &-duration {
      position: relative;

      span {
        position: absolute;
        right: 4px;
        bottom: 8px;
        font-size: 10px;
        color: var(--vt-c-white);
      }
    }

    &-info {
      display: flex;
      flex-direction: column;

      .van-text-ellipsis {
        font-weight: bold;
      }

      span {
        font-size: 10px;
        color: #6f6f6f;
      }
    }
  }

  &-occupying {
    border-bottom: 40px solid var(--color-background);
  }

  .van-divider {
    margin: 0;
  }
}

.van-hairline--bottom:after {
  content: none;
}

.van-button--round {
  background: transparent;
}
</style>